<script setup lang="ts">
defineOptions({
  name: "equipItem"
});

import { ref, computed, nextTick, getCurrentInstance } from "vue";
import ReTextTooltip from "@/components/ReTextTooltip";
import { colors, formatSpecialGasEquipBackgroundImageUrl } from "../../hooks";
import curve from "../../components/curve.vue";

const { proxy }: any = getCurrentInstance();
const props = withDefaults(defineProps<{ data: Record<string, any> | null; height: number }>(), { data: null, height: null });
const height_bottle = computed(() => Math.round(((props.height - 170) * 68) / 100));
const width_bottle = computed(() => Math.round((height_bottle.value * 2) / 7));
const height_bottle_str = computed(() => `${height_bottle.value}px`);
const width_bottle_str = computed(() => `${width_bottle.value}px`);
const gasBottleLeftUrlBackgroundImage = computed(() => {
  const url = `/ifp-web-static/image/gas/statusVisual/specialGasEquip/${formatSpecialGasEquipBackgroundImageUrl(Number((props.data?.list[0]?.capacity * 100) / props.data?.list[0]?.fullCapacity))}.png`;
  return `url(${proxy.useGetStaticUrl(url)})`;
});
const gasBottleRightUrlBackgroundImage = computed(() => {
  const url = `/ifp-web-static/image/gas/statusVisual/specialGasEquip/${formatSpecialGasEquipBackgroundImageUrl(Number((props.data?.list[1]?.capacity * 100) / props.data?.list[1]?.fullCapacity))}.png`;
  return `url(${proxy.useGetStaticUrl(url)})`;
  // return `url(/ifp-web-static/image/gas/statusVisual/specialGasEquip/100.png)`;
});

const dialogVisible = ref<boolean>(false);
const pointCode = ref<string>("");
const groupCode = ref<string>("");
const deviceCode = ref<string>("");
const unit = ref<string>("");

const title = computed(() => {
  switch (unit.value) {
    case "Lbs":
      return "重量";
    case "psi":
      return "气压";
    default:
      return "气压";
  }
});

const backgroundImage = `url(${proxy.useGetStaticUrl("/ifp-web-static/image/gas/statusVisual/specialGasEquip/box.png")})`;

const getCommonBackgroundStyle = (code: string) => {
  const l = colors.get(code);
  const color = l?.color || "#888";
  const background = `linear-gradient(to right, #fff, ${l?.backgroundColor}, #fff)`;
  const borderImage = `linear-gradient(to right, #fff, ${l?.borderBackgroundColor}, #fff)`;
  return { color, background, borderImage };
};

const checkCurveHandler = async (data: Record<string, any>) => {
  pointCode.value = data?.pointCode;
  groupCode.value = data?.groupCode;
  deviceCode.value = data?.deviceCode;
  unit.value = data?.unit;
  await nextTick();
  dialogVisible.value = true;
};
</script>

<template>
  <div class="equip-item">
    <div class="equip-item-label">
      <ReTextTooltip :content="data?.deviceCode" />
    </div>
    <div class="equip-item-status">
      <div v-if="!data?.deviceStatus" class="equip-item-status-bottle">
        <div class="status-common status-bottle-left" :style="{ ...getCommonBackgroundStyle(data?.list[0]?.deviceStatus) }">
          {{ data?.list[0]?.deviceStatusName || "未知" }}
        </div>
        <div class="status-common status-bottle-right" :style="{ ...getCommonBackgroundStyle(data?.list[1]?.deviceStatus) }">
          {{ data?.list[1]?.deviceStatusName || "未知" }}
        </div>
      </div>
      <div v-else class="status-common equip-item-status-device" :style="{ ...getCommonBackgroundStyle(data?.deviceStatus) }">
        {{ data?.deviceStatusName || "未知" }}
      </div>
    </div>
    <div class="equip-item-visual" :style="{ backgroundImage }">
      <div
        class="equip-item-visual-item equip-item-visual-left"
        :style="{ backgroundImage: gasBottleLeftUrlBackgroundImage }"
        @click="checkCurveHandler(data?.list[0])"
      >
        {{
          // typeof data?.list[0]?.capacity === "number" && typeof data?.list[0]?.fullCapacity === "number"
          // ? `${Math.round((data?.list[0]?.capacity * 100) / data?.list[0]?.fullCapacity)}%`
          // : "--"
          data?.list[0]?.capacity || "--"
        }}
      </div>
      <div
        class="equip-item-visual-item equip-item-visual-right"
        :style="{ backgroundImage: gasBottleRightUrlBackgroundImage }"
        @click="checkCurveHandler(data?.list[1])"
      >
        {{
          // typeof data?.list[1]?.capacity === "number" && typeof data?.list[1]?.fullCapacity === "number"
          // ? `${Math.round((data?.list[1]?.capacity * 100) / data?.list[1]?.fullCapacity)}%`
          // : "--"
          data?.list[1]?.capacity || "--"
        }}
      </div>
    </div>
    <div class="equip-item-msg">
      <div class="msg-label">历史更换时间：</div>
      <div class="msg-value margin">
        <ReTextTooltip :content="data?.historyTime" />
      </div>
      <div class="msg-label">预计下次更换时间：</div>
      <div class="msg-value red">
        <ReTextTooltip :content="data?.nextTime" />
      </div>
    </div>
    <curve
      v-if="dialogVisible"
      v-model="dialogVisible"
      :title="title"
      :scale="1"
      :unit="unit"
      :pointCode="pointCode"
      :groupCode="groupCode"
      :deviceCode="deviceCode"
    />
  </div>
</template>

<style lang="scss" scoped>
.equip-item {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  height: 100%;
  padding: 12px 20px;

  .equip-item-label {
    width: 100%;
    height: 18px;
    font-size: 13px;
    font-weight: 600;
    color: #222;
    text-align: center;
  }

  .equip-item-status {
    width: 100%;
    height: 24px;

    .status-common {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      font-weight: 600;
      line-height: 1;
      white-space: nowrap;
      border-top: 1px solid #eee;
      border-bottom: 1px solid #eee;
    }

    .equip-item-status-bottle {
      display: flex;
      align-items: center;
      width: 100%;
      height: 100%;

      .status-bottle-left {
        flex: 1;
        height: 100%;
      }

      .status-bottle-right {
        flex: 1;
        height: 100%;
      }
    }

    .equip-item-status-device {
      width: 100%;
      height: 100%;
    }
  }

  .equip-item-visual {
    box-sizing: border-box;
    display: flex;
    flex: 1;
    // gap: 16px;
    gap: 6%;
    align-items: flex-end;
    justify-content: center;
    width: 100%;
    padding-bottom: 2px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    // background-size: 90px 100%;

    .equip-item-visual-item {
      display: flex;
      flex-wrap: nowrap;
      align-items: center;
      justify-content: center;
      width: v-bind(width_bottle_str);
      height: v-bind(height_bottle_str);
      font-size: 12px;
      font-weight: 600;
      line-height: 1;
      color: navy;
      text-align: center;
      text-shadow: 0 0 8px #fff;
      background-repeat: no-repeat;
      background-position: center center;
      background-size: contain;

      &:hover {
        cursor: pointer;
        opacity: 0.8;
      }
    }
  }

  .equip-item-msg {
    width: 100%;

    .msg-label {
      width: 100%;
      font-size: 13px;
      line-height: 1.6;
      color: #888;
      white-space: nowrap;
    }

    .msg-value {
      width: 100%;
      font-size: 13px;
      line-height: 1.6;
      color: #222;
      white-space: nowrap;
    }

    .margin {
      margin-bottom: 4px;
    }

    .red {
      color: #ef4444;
    }
  }
}
</style>
